<template>
  <div class="diaLogBox" v-show="isShow">
    <span class="close" @click="close">
      <i class="el-icon-close"></i>
    </span>
    <h2 v-text="form.id + 1 ? '编辑设备' : '新增设备'"></h2>
    <!-- <h3>{{editEquipData}}</h3> -->
    <el-form label-position="left" :model="form" :rules="rules" ref="ruleForm">
      <el-form-item label="设备名称" prop="deviceName">
        <el-input
          v-model="form.deviceName"
          placeholder="请输入设备名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="设备类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择设备类型">
          <el-option label="球机" value="1"></el-option>
          <el-option label="枪机" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经度" prop="x">
        <el-input v-model="form.x" placeholder="点击地图获取坐标"></el-input>
      </el-form-item>
      <el-form-item label="纬度" prop="y">
        <el-input v-model="form.y" placeholder="点击地图获取坐标"></el-input>
      </el-form-item>
      <el-form-item label="视频地址" prop="url">
        <el-input v-model="form.url" placeholder="请输入视频地址"></el-input>
      </el-form-item>
      <el-form-item label="安装位置" prop="location">
        <el-input
          v-model="form.location"
          placeholder="请输入安装位置"
        ></el-input>
      </el-form-item>
      <el-switch
        style="display: block"
        v-model="form.status"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="启用"
        inactive-text="禁用"
        :active-value="1"
        :inactive-value="2"
      >
      </el-switch>
      <el-button
        class="btn"
        type="primary"
        @click="submit"
        v-text="form.id + 1 ? '提交' : '添加'"
      ></el-button>
    </el-form>
  </div>
</template>

<script>
// import { ezvizDeviceInsert } from "@/api/api";
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    // editEquipData:{
    //   type: Object,
    //   default: () => {{}},
    // }
  },

  data() {
    return {
      drawer: false,
      direction: "rtl",
      enable: true,
      form: {
        mineId: this.$store.state.mineId,
        deviceName: "",
        url: "",
        x: null,
        status: 1,
        y: null,
        location: "",
        type:"" 
      },
      rules: {
        type: [
            { required: true, message: '请选择设备类型', trigger: 'change' }
          ],
        deviceName: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        url: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
        x: [{ required: true, message: "请输入坐标", trigger: "blur" }],
        y: [{ required: true, message: "请输入坐标", trigger: "blur" }],
        location: [
          { required: true, message: "请输入安装位置", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async close() {
      await this.$refs.ruleForm.resetFields();
      this.$emit("dialogShow", false);
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          ezvizDeviceInsert(this.form).then((res) => {
            if (res.msg === "success") {
              this.$message({
                message: "成功",
                type: "success",
              });
              this.$refs.ruleForm.resetFields();

              this.form = {
                mineId: this.$store.state.mineId,
                deviceName: "",
                url: "",
                x: null,
                status: 1,
                y: null,
                location: "",
              };
              this.$emit("dialogShow", false);
            }
          });
        } else {
          this.$message.error("失败!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.diaLogBox {
  position: fixed;
  border-left: 1px solid #ccc;

  padding: 40px 20px;
  width: 500px;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #fff;
  .close {
    position: absolute;
    top: 0;
    right: 0;
  }
  .btn {
    margin-top: 30px;
  }
}
</style>